import { useRoute, useRouter } from "vue-router";
import c from "./index.module.less";
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import { useTabsStore } from "@/stores/modules/tabs";
import { useMenuStore } from "@/stores/modules/menu";
import {
  ElIcon,
  ElTabPane,
  ElTabs,
  TabPaneName,
  TabsPaneContext,
} from "element-plus";
import IconMap from "@/config/sideNavIconMap";

export default defineComponent({
  name: "tabs",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const tabStore = useTabsStore();
    const authStore = useMenuStore();

    const tabsMenuValue = ref(route.fullPath);
    const tabsMenuList = computed(() => tabStore.tabsMenuList);

    onMounted(() => {
      //   tabsDrop();
      initTabs();
    });

    // 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
    watch(
      () => route.fullPath,
      () => {
        if (route.meta.isFull) return;
        tabsMenuValue.value = route.fullPath;
        const tabsParams = {
          icon: route.meta.icon as string,
          title: route.meta.title as string,
          path: route.fullPath,
          name: route.name as string,
          close: !route.meta.isAffix,
          isKeepAlive: route.meta.isKeepAlive as boolean,
        };
        tabStore.addTabs(tabsParams);
      },
      { immediate: true }
    );

    // 初始化需要固定的 tabs
    const initTabs = () => {
      authStore.flatMenuListGet.forEach((item) => {
        if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
          const tabsParams = {
            icon: item.meta.icon,
            title: item.meta.title,
            path: item.path,
            name: item.name,
            close: !item.meta.isAffix,
            isKeepAlive: item.meta.isKeepAlive,
          };
          tabStore.addTabs(tabsParams);
        }
      });
    };

    // tabs 拖拽排序
    // const tabsDrop = () => {
    //   Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
    //     draggable: ".el-tabs__item",
    //     animation: 300,
    //     onEnd({ newIndex, oldIndex }) {
    //       const tabsList = [...tabStore.tabsMenuList];
    //       const currRow = tabsList.splice(oldIndex as number, 1)[0];
    //       tabsList.splice(newIndex as number, 0, currRow);
    //       tabStore.setTabs(tabsList);
    //     },
    //   });
    // };

    // Tab Click
    const tabClick = (tabItem: TabsPaneContext) => {
      const fullPath = tabItem.props.name as string;
      router.push(fullPath);
    };

    // Remove Tab
    const tabRemove = (fullPath: TabPaneName) => {
      tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
    };
    return () => {
      return (

        <div class={c.tabs}>
          <ElTabs
            class={c.tabsEl}
            v-model={tabsMenuValue}
            onTabClick={tabClick}
            onTabRemove={tabRemove}
          >
            {tabsMenuList.value &&
              tabsMenuList.value.map((item) => (
                <ElTabPane
                  class={c.pane}
                  key={item.path}
                  label={item.title}
                  name={item.path}
                  closable={item.close}
                  v-slots={{
                    label: () => (
                      <>
                        <ElIcon>{IconMap[item.icon]}</ElIcon>
                        <span class={c.title}>{item.title}</span>
                      </>
                    ),
                  }}
                ></ElTabPane>
              ))}
          </ElTabs>
        </div>

      );
    };
  },
});
